<!-- 品牌营销 -->

<template>
	<view class="Tatal ">
		<!-- 详细信息 -->
		<view class=" brand F">
			<view class="brand3">
				<image class="img" :src="list.headPortrait"></image>
			</view>
			<view class="brand1">
				<text class="brand1-text">{{list.hospitalName}}</text>
				<view class="brand2">
					<view class="brand2-iew">
						<text class="brand2-te">{{list.fansCount}}</text>
						<text class="brand2-xt">粉丝</text>
					</view>
					<view class="brand2-iew">
						<text class="brand2-te">{{list.likeCount}}</text>
						<text class="brand2-xt">获赞</text>
					</view>
					<view class="brand2-iew">
						<text class="brand2-te">{{list.articleCount}}</text>
						<text class="brand2-xt">发表</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 下拉添加  -->

		<view class="jia" @click="add">
			<text>...</text>
		</view>
		<view v-show="ref2" class="jia1">
			<view class="Patients">
				<text @click="Patients">患者推广</text>

			</view>
			<text @click="ye">行业推广</text>

		</view>
		<view class="f1 F">
			<!-- 左右切换 -->
			<wuc-tab class="list F" :tab-list="tabList" :tabCur.sync="TabCur" @change="tabChange"></wuc-tab>
			<!-- 状态下拉切换 -->
			<view class="f2">
				<view style="width: 100%; margin: auto;margin-bottom: 20px;">
					<xfl-select :list="Alist" :clearable="false" :showItemNum="5" :listShow="false" :isCanInput="false"
					 :style_Container="listBoxStyle" :placeholder="'placeholder'" :initValue="'未审核'" :selectHideType="'independent'"
					 @change="change">
					</xfl-select>
				</view>
			</view>
		</view>


		<view class=" list-view ">
			<view @click="goDetail(item.id)" class="panel F" v-for="item in statuses" :key="item.id">
				<image class="list-img" :src="item.url[0]"></image>
				<!-- <image class="list-img"  :src="item.url"></image> -->
				<text class="list-text">{{item.title}}</text>

			</view>
		</view>
		<text class="loadMore">{{ contentText }}</text>
	</view>
</template>

<script>
	// 左右切换
	import WucTab from '@/components/wuc-tab/wuc-tab.vue';
	// 下拉列表
	import xflSelect from '../../components/xfl-select/xfl-select.vue';
	export default {
		components: {
			WucTab,
			xflSelect
		},

		data() {
			return {
				contentText: '上拉显示更多',
				ccData: [],
				list: {},
				pageSize: 10,
				types: 0,
				typein: 0,
				refreshing: false,
				statuses: [],
				fetchPageNum: 1,
				TabCur: 0,
				listsNum: 0,
				tabList: [{
					name: '患者推广'
				}, {
					name: '行业推广'
				}],
				listBoxStyle: `width:100upx,  font-size: 16px;`,
				Alist: ['未审核', '已通过', '未通过'],
				ref2: false,
				pullFlag: true,
			};
		},
		onShow() {

			this.fetchPageNum = 1;
			this.pullFlag = true;
			this.refreshing = false;
			this.getMarketingList();

			// this.urlData();

		},
		onReachBottom() {
			console.log('滑动到页面底部');
			this.contentText = '加载中...';
			if (this.pullFlag) {
				this.fetchPageNum += 1;
				this.pulllists();
			} else {
				this.contentText = '暂无更多数据';
			}
		},
		onPullDownRefresh() {
			// this.reload=true;
			console.log('下拉刷新');
			// this.getData();
			uni.startPullDownRefresh({
				//API开始下拉刷新操作
				success: res => {
					console.log('shuacin', this.fetchPageNum);
					this.refreshing = true;
					this.getMarketingList(); //下拉刷新重新获取数据
					uni.stopPullDownRefresh(); //API停止下拉刷
				}
			});
		},
		methods: {
			// 点击跳转详情
			goDetail(id) {
				uni.navigateTo({
					url: '/pages/brandmarketing/particulars?data=' + id
				})
			},
			// 下拉状态
			change({
				newVal,
				oldVal,
				index,
				orignItem
			}) {
				console.log(newVal, oldVal, index, orignItem);
				var that = this;
				that.listsNum = index;
				that.getMarketingList();
			},



			// 选择属性
			tabChange(index) {
				var that = this;
				that.TabCur = index;
				that.getMarketingList();
			},

			// 公共请求
			getMarketingList() {
				var that = this;
				uni.request({
					url: this.$serverUrl + '/app/hospital/brandMarketing/getMarketingList',
					data: {
						'pageNumber': 1,
						pageSize: this.pageSize,
						'type': that.TabCur + 1,
						'status': that.listsNum + 1
					},
					method: "POST",
					header: {
						'token': uni.getStorageSync('token'),
						'content-type': "application/x-www-form-urlencoded"
					},
					success: (res) => {
						that.list=res.data.data.hospital
						console.log(that.list)
						
						

						if (res.data.code == 0) {
							
							if (this.refreshing) {
								uni.showToast({
									title: '已经最新',
									icon: 'none'
								});
								this.refreshing = false;
								uni.stopPullDownRefresh();
								return;
							}
							this.statuses = [];
							let lists = [];
							// if (res.data.data.length > 0) {
								if (res.data.data.MarketingList.length > 0) {
									let data = res.data.data.MarketingList;
									for (let i = 0; i < res.data.data.MarketingList.length; i++) {
										var item = data[i]
										item.url = item.url.split(',')
										lists.push(item);
									}
									if (lists.length < this.pageSize) {
										this.contentText = '暂无更多数据';
									}
									this.lists = res.data.data.MarketingList;
									console.log('得到lists', lists);
									if (this.refreshing) {
										this.refreshing = false;
										uni.stopPullDownRefresh();
										this.statuses = lists;
									} else {
										this.statuses = lists;
										console.info('this.fetchPageNum == ' + this.fetchPageNum);
										// this.fetchPageNum += 1;
										console.log(this.statuses);
									}
								}

							// }

						}

					}
				})
			},
			pulllists() {
				console.log(this.fetchPageNum);
				var that = this;
				uni.request({
					url: this.$serverUrl + '/app/hospital/brandMarketing/getMarketingList',
					data: {
						'pageNumber': this.fetchPageNum,
						pageSize: this.pageSize,
						'type': that.TabCur + 1,
						'status': that.listsNum + 1
					},
					method: "POST",
					header: {
						'token': uni.getStorageSync('token'),
						'content-type': "application/x-www-form-urlencoded"
					},
					success: res => {
						that.list=res.data.data.hospital
							if (res.data.code == 0) {
								if (this.refreshing) {
									uni.showToast({
										title: '已经最新',
										icon: 'none'
									});
									this.refreshing = false;
									uni.stopPullDownRefresh();
									return;
								}
								this.statuses = [];
								let lists = [];
								if (res.data.data.MarketingList.length > 0) {
									let data = res.data.data[0].MarketingList;
									for (let i = 0; i < res.data.data[0].MarketingList.length; i++) {
										var item = data[i]
										item.url = item.url.split(',')
										lists.push(item);
									}
									if (lists.length < this.pageSize) {
										this.pullFlag = false;
									}
									console.log('得到lists', lists);
									this.statuses = this.statuses.concat(lists);
									console.log(this.statuses);
								}
							}
						
			
					}
			
				});
			},

			// 添加状态文章
			add: function() {
				this.ref2 = !this.ref2;
			},
			Patients: function() {
				uni.navigateTo({
					url: '/pages/brandmarketing/publish?types=' + 1
				})

			},
			ye: function() {
				uni.navigateTo({
					url: '/pages/brandmarketing/publish?types=' + 2
				})
			},





			swiperChange(e) {},
			visibleChange(isShow) {
				// 列表框的显示隐藏事件
				console.log('isShow::', isShow);
			},

		}
	}
</script>

<style>
	.f1 {
		position: relative;
		/* padding-left:30upx; */
		/* padding-right: 30upx; */
	}

	.f2 {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 10;
		width: 200upx;
	}

	.jia {
		position: absolute;
		top: -60upx;
		right: 0;
		z-index: 10;
		width: 20upx;
		margin-right: 50upx;
		/* size: 80upx; */
		font-size: 80upx;

	}

	.jia1 {
		background-color: #FFFFFF;
		position: absolute;
		top: 50upx;
		font-size: 30upx;
		right: 10upx;
		z-index: 10;
		width: 130upx;
		height: 240upx;
		border-color: #f5f5f5;
		border-width: 2upx;
		line-height: 60upx;
		text-align: center;
		flex-direction: column;
		margin-right: 0;

	}

	.Patients {
		margin: 20upx 0upx;
	}

	page {
		background-color: #f8f8f8;
	}

	.Tatal {
		display: flex;
		flex-direction: column;
	}

	.brand {
		height: 260upx;
		display: flex;
		flex-direction: row;
		padding: 0upx 30upx;
		margin-bottom: 5upx;
	}

	.img {
		width: 140upx;
		height: 140upx;
		margin: 10upx;
	}

	.brand3 {
		display: flex;
		flex-direction: row;
		width: 160upx;
		height: 160upx;
		border: 2upx solid #efefee;
		margin-right: 30upx;
	}

	.brand1 {
		display: flex;
		flex-direction: column;
	}

	.brand1-text {
		font-size: 30upx;
		font-weight: bold;
		color: #222222;
	}

	.brand2 {
		display: flex;
		flex-direction: row;
		font-size: 20upx;
	}

	.brand2-iew {
		display: flex;
		flex-direction: column;
		margin-right: 70upx;
		margin-top: 30upx;
	}

	.brand2-xt {
		color: #909090;
	}

	.brand2-te {
		color: #222222;
	}

	.gao {
		display: flex;
		flex-direction: column;
		height: 520upx;
	}

	.list {
		display: flex;
		flex-direction: column;
		padding-bottom: 15upx;
		margin-bottom: 20upx;
	}

	.list-view {
		width: 100%;
		/* justify-content: space-between; */
		padding: 0upx 30upx;
		/* 	display: flex;
	flex-direction:row; */
	}

	.list-img {
		width: 333upx;
		height: 334upx;
		margin-bottom: 25upx;
	}

	.list-text {
		padding: 0upx 30upx;
		font-size: 30upx;
		color: #505050;
		/* 	overflow: hidden;
	height: 70upx; */
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.list-bom {
		display: flex;
		flex-direction: row;
		padding: 20upx 20upx;
		align-items: center;
	}

	.bom-img1 {
		width: 30upx;
		height: 30upx;
		border-radius: 50%;
	}

	.bom-text {
		font-size: 17upx;
	}

	.bom-img2 {
		width: 25upx;
		height: 20upx;
		margin-left: auto;
	}

	.bom-text1 {
		font-size: 13upx;
		margin-left: auto;
	}

	.grid-c-06 {
		position: relative;
		width: 100%;
		box-sizing: border-box;
	}

	.panel {
		/* display: flex;
	flex-direction: column; */
		width: 333upx;
		border-radius: 10upx;
		overflow: hidden;
		background-color: #ffffff;
		margin-bottom: 10px;
		margin-right: 20upx;
		float: left;
		height: 450upx;
	}


	.a1 {
		width: 750upx;
		margin-top: 40upx;
		/* background-color: #2FC25B; */
		padding-left: 20upx;
		padding-right: 20upx;
	}

	.a2 {
		float: left;
		width: 335upx;

		margin: 0upx 10upx 20upx;

	}
</style>
